<template>
  <div>
    <div>
      <div>“下拉框选择不同的语言--这句话没做转换”</div>
      <el-select
        style="margin: 20px 0px"
        @change="langChange"
        :placeholder="$t('placeholder')"
        v-model="languageVal"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div style="margin: 20px 0px">
      <!-- 第一种用法 -->
      {{ $t("article.text") }}
    </div>
    <div>
      <el-button type="primary" @click="dialogVisible = true">
        {{ $t("HelloWorld.open.button") }}
      </el-button>
      <!-- 第二种用法 写在v-bind的属性上面 -->
      <el-dialog
        :title="$t('HelloWorld.tips')"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>{{ $t("HelloWorld.title") }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">
            {{ $t("HelloWorld.cancel") }}
          </el-button>
          <el-button type="primary" @click="dialogVisible = false">
            {{ $t("HelloWorld.confirm") }}
          </el-button>
        </span>
      </el-dialog>
    </div>
    <div style="margin: 20px 0px">下面的需要刷新页面才会改变--第三种用法</div>
    <div>{{ refresh }}</div>
  </div>
</template>
  <script>
  import SwitchDark from "../components/SwitchDark"
export default {
  name: "Home",
  data() {
    return {
      refresh: this.$t("refresh"), // 第三种用法，不过这种用法在切换预言时，需要刷新页面才会生效
      dialogVisible: false,
      languageVal: this.$i18n.locale,
      options: [
        {
          value: "cn",
          label: "中文",
        },
        {
          value: "en",
          label: "English",
        },
        {
          value: "ko",
          label: "한국어",
        },
      ],
    };
  },
  methods: {
    //语言切换
    langChange(e) {
      localStorage.setItem("lang", e);
      this.$i18n.locale = e;
      // window.location.reload() // 第三种用法刷新页面
    },
    handleClose(done) {
      this.$confirm(this.$t("HelloWorld.title"))
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
  